<template>
  <div>
    <div class="share-item">
      会议主题:
      {{ meetingInfo.title }}
    </div>
    <div class="share-item">
      会议室号:
      {{ meetingInfo.meetingNumber}}
    </div>
    <div class="share-item">
      会议链接:
      {{meetingLink}}
    </div>
    <div align="center">
      <el-button
        type="primary"
        @click="copyLink"
      >
        复制分享链接
      </el-button>
      <el-button @click="$emit('cancel')">
        取消
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    meetingInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    meetingLink () {
      return `${process.env.VUE_APP_WEB_URL}?roomNumber=${this.meetingInfo.meetingNumber}`
    }
  },
  methods: {
    copyLink () {
      const meetingPwd = this.meetingInfo.password
      const linkInput = document.createElement('input')
      linkInput.value =
        '【' +
        window.sessionStorage.userName +
        '】' +
        '邀请你参加视频会议，点击链接加入会议，' +
        this.meetingLink +
        (meetingPwd ? '会议密码为' + meetingPwd : '')
      document.body.appendChild(linkInput)
      linkInput.select()
      document.execCommand('Copy')
      linkInput.className = 'linkInput'
      linkInput.style.display = 'none'
      this.$message.success('邀请链接复制成功')
      this.$emit('submit')
    }
  }
}
</script>

<style lang="scss" scoped>
.share-item {
  margin-bottom: 20px;
}
</style>
